<template>
  <div>
    <div id="driveInfo" class="marginTop">
      <div class="left">
        <div class="system-icon controller-img"></div>
        <p class="infoTitle">{{ $t('STORE_DISK_INFO') }}</p>
        <el-button
          v-if="hasBaseConfigPrivil"
          :id="'settingBtn'"
          :disabled="systemLocked || startCollectingLogs || onTask"
          class="settingBtn"
          size="small"
          @click="show()"
        >
          {{ $t('HOME_FDM_ALARM_SETTING') }}
        </el-button>
      </div>
      <div id="driveContent" class="right">
        <template v-for="item in driver.data" :key="item">
          <div v-if="item && item.length === 2" v-show="item[1] !== null" class="row">
            <span class="rowLeft">{{ $t(item[0]) }}</span>
            <span class="rowRight">
              <span class="item"></span>
              {{ getI18n(item[1]) }}
            </span>
          </div>
        </template>
      </div>
    </div>
  </div>
  <Dialog
    ref="dialog"
    class="driver-edit-dialog"
    :class="{ 'edit-dialog-update': editUpdate }"
    :config="diaginfo"
    @close="dialogClose"
  >
    <template #other>
      <DriverEditVue
        :data="driverNodeE.data"
        @handle-close="handleClose"
        :settingShow="isSetting"
        @update="updateEdit"
      ></DriverEditVue>
    </template>
  </Dialog>
  <Dialog ref="secondDialogRef" :config="secondDialogConfig" @close="closeModal" />
</template>

<script lang="ts" setup>
import { computed, inject, onMounted, reactive, ref, watch} from 'vue';

import { factory } from './drivers.service';
import { StorageTree, DriverNode, Driver, Raid, DriverEditModel } from '../../models';
import useStore from '@/stores';
import { loading, showFailedMessage, showSuccessMessage } from '@/utils/composition';
import { checkPrivil } from '@/apps/app-bmc/router/routes';
import { UserPrivil } from '@/model/base-enum';
import { traduction, getErrorTranslate } from '@/utils/language';
import Dialog from '@/components/Dialog/Dialog.vue';
import DriverEditVue from './driver-edit/DriverEdit.vue';
import { updateEditData } from './driver-edit/driver-edit.service';
const store = useStore();
let systemLocked = computed(() => {
  return store.state.glob.systemLocked;
});

const hasBaseConfigPrivil = checkPrivil(UserPrivil.baseConfig);

const editUpdate = ref(false);
let driver: any = reactive({ data: {} });
let driverNode: any;
const driverNodeE: any = reactive({ data: [] });
const isSetting = ref(false);
const diaginfo = reactive({
  id: 'volumnEdit',
  type: 'warning',
  content: '',
  title: traduction('HOME_FDM_ALARM_SETTING'),
});
let editParmes: any;
const dialog = ref();
const secondDialogConfig = reactive({
  id: 'secondDialog',
  title: traduction('COMMON_CONFIRM'),
  content: traduction('COMMON_ASK_OK'),
});
const secondDialogRef = ref();
const props = defineProps({
  data: {
    required: true,
    type: Object,
    default: () => {
      return {};
    },
  },
  node: {
    required: true,
    type: Object,
    default: () => {
      return {};
    },
  },
  collectList: {
    required: true,
    type: Object,
    default: () => {
      return {};
    },
  },
  onTask: {
    type: Boolean,
    default: false,
  },
});
const collectList = reactive(props.collectList);
const str = ref('');
const startCollectingLogs = ref(false);
watch(props.collectList, newVal => {
  startCollectingLogs.value = props.collectList[str.value] || false;
});
onMounted(() => {
  checkNode();
});
function handleClose(param: boolean) {
  if (param) {
    dialog.value.disable();
    return;
  }
  editParmes = param;
  dialog.value.enable();
}

function checkNode() {
  driverNodeE.data = props.node;
  driverNode = StorageTree.getInstance().getCheckedNode as DriverNode;
  if (driverNode && driverNode.getDriver) {
    driver.data = driverNode?.getDriver;
    isSetting.value = settingShow();
  } else {
    factoryFun();
  }
  const labelId = driverNode.labelId;
  str.value = labelId?.split('_')[0];
  startCollectingLogs.value = collectList[str.value] || false;
  loading(false);
}
function dialogClose(val: boolean) {
  if (val) {
    secondDialogRef.value.show();
  } else {
    dialog.value.hide();
  }
}

function closeModal(reason: boolean) {
  if (reason) {
    loading(true);
    updateEditData(props.node.url)
      .then(() => {
        showSuccessMessage();
        factoryFun();
      })
      .catch((error) => {
        const errorCode = error?.data?.error?.[0].code;
        if (errorCode) {
          showFailedMessage(getErrorTranslate(errorCode));
        } else {
          showFailedMessage();
        }
      })
      .finally(() => {
        loading(false);
        dialog.value.hide();
      });
    dialog.value.hide();
    editUpdate.value = false;
  } else {
    // 取消或者右上角关闭时保持设置弹窗按钮状态
    dialog.value.enable();
    editUpdate.value = true;
  }
  secondDialogRef.value.hide();
}
function factoryFun(node?: any) {
  loading(true);
  driverNode = StorageTree.getInstance().getCheckedNode as DriverNode;
  factory(node ? node : driverNode)
    .then((resdriver: Driver) => {
      driverNode.setDriver = resdriver;
      driver.data = resdriver;
      driverNodeE.data.setDriver = resdriver;
      isSetting.value = settingShow();
      loading(false);
    })
    .catch(() => {
      loading(false);
    });
}
function updateEdit(val: boolean) {
  editUpdate.value = val;
  loading(false);
}

function show(): void {
  loading(true);
  dialog.value.show();
  dialog.value.disable();
}

function settingShow(): boolean {
  if (driverNode && driverNode.getIsRaid && driver?.data?.getFirmwareStatus) {
    return true;
  }
  return false;
}

function getI18n(s?: any) {
  if (Object.prototype.toString.call(s) === '[object Object]') {
    if (s.label) {
      return traduction(s.label);
    } else {
      return '--';
    }
  }
  return s;
}
defineExpose({
  factoryFun, checkNode,
});
</script>

<style lang="scss" scoped>
.eventLevelInformational {
  display: inline-block;
  width: 16px;
  height: 16px;
  position: relative;
  top: 2px;
  margin-right: 3px;
  background: url('/assets/common-assets/image/alarmEvent/normal.png') no-repeat left center;
}
.eventLevelMinor {
  display: inline-block;
  width: 16px;
  height: 16px;
  position: relative;
  top: 2px;
  margin-right: 3px;
  background: url('/assets/common-assets/image/alarmEvent/minor.png') no-repeat left center;
}
.eventLevelMajor {
  display: inline-block;
  width: 16px;
  height: 16px;
  position: relative;
  top: 2px;
  margin-right: 3px;
  background: url('/assets/common-assets/image/alarmEvent/emergency.png') no-repeat left center;
}
.eventLevelCritical {
  display: inline-block;
  width: 16px;
  height: 16px;
  position: relative;
  top: 2px;
  margin-right: 3px;
  background: url('/assets/common-assets/image/alarmEvent/severe.png') no-repeat left center;
}
#driveInfo {
  background-color: var(--o-bg-color-base);
  border-radius: 4px;
  margin-top: 8px;
  padding: 16px;
  display: flex;
  .left {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-right: 72px;
    border-right: 1px solid var(--o-border-color-light);
    width: 183px;
  }
  .right {
    flex: 1;
  }
}
.row {
  width: 50%;
  float: left;
  padding: 8px 0;
  .rowLeft {
    width: 35%;
    display: inline-block;
    font-size: 12px;
    color: var(--o-text-color-secondary);
    word-break: break-word;
  }
  .rowRight {
    width: 65%;
    display: inline-block;
    font-size: 12px;
    color: var(--o-text-color-secondary);
    word-break: break-word;
  }
}
.controller-img {
  width: 30px;
  height: 30px;
  margin-bottom: 12px;
  background: url(@/assets/assets-bmc/default/storage_control.svg) 50% 50%;
}
#settingBtn {
  margin-top: 8px;
}
.driver-edit-dialog {
  visibility: hidden;
  &.edit-dialog-update {
    visibility: visible;
  }
}
</style>
